<template>
  <div class="gzpost-page">
    <Menus title="在线申请" :home="true" />
    <div class="gzpost-page-content">
      <div class="c1">
        <h1>公证在线申办</h1>
        <div class="info">可以在线申办的公证事项：驾驶证公证、无犯罪记录公证、户口簿公证、学位证书公证、学历证书公证、成绩单公证</div>
        <div class="qr">
          <img src="static/img/home/logo_erweima.png" alt="">
        </div>
        <p>微信扫一扫，快速在线申办</p>
      </div>
      <div class="c2">
        <div class="details">
          <h2 class="title">在线申办流程</h2>
          <div class="content">
            <p>
              打开手机微信扫描左侧的二维码，关注【昆明掌上12348】，点击【法律服务】，选择【公证办理】-->【在线申办】，您可以直接在线填写信息、上传材料照片，公证处工作人员将会对您的申请进行审核，审核通过工作人员就可以为您办理公证事项。待公证书出具后，您只需要前往公证处缴费领证即可，避免了您多次往返准备材料。 </p>
            <p><img src="static/img/img_gz.png" alt=""></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu.vue'
export default {
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.gzpost-page {
  .gzpost-page-content {
    display: flex;
    .c1 {
      width: 600px;
      height: 100vh;
      text-align: center;
      flex-shrink: 0;
      background: #2196f3;
      color: #fff;
      h1 {
        padding-top: 300px;
        font-weight: normal;
        font-size: 36px;
      }
      .qr {
        width: 200px;
        margin: 40px auto 15px;
        img {
          display: block;
          width: 100%;
        }
      }
      .contact {
        margin-top: 40px;
        strong {
          font-size: 42px;
          font-weight: normal;
          display: block;
        }
        span {
          display: block;
          margin: 0 15%;
          padding-top: 10px;
          border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        i {
          font-style: normal;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .info {
        margin: 20px 40px 40px;
        font-size: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding-bottom: 40px;
        color: #fff;
      }
      p {
        color: #fff;
        font-size: 16px;
      }
    }
    .c2 {
      .details {
        background: #fff;
        height: 100vh;
        overflow-y: scroll;
        padding: 200px 300px 0 100px;
        h2.title {
          margin-top: 25px;
          border-bottom: 1px solid #ddd;
          padding-bottom: 15px;
        }
        .content {
          margin-bottom: 40px;
          font-size: 18px;
          img {
            display: block;
            padding-top: 30px;
          }
        }
      }
    }
  }
}
</style>
